<script setup>
import InputText from "../components/InputText.vue";
import Button from "../components/Button.vue";
import IconSvg from "../components/IconSvg.vue";
import Message from "../components/Message/Message.js";
import { ref, onMounted } from "vue"
import axios from "../axios/axios.js";

const mqttUrl = ref("")
const accessKey = ref("")
const infoCommit = () => {
  axios.post("/api/service/save", {
    mqttserveraddress: mqttUrl.value,
    accesskey: accessKey.value
  }).then((res) => {
    if (res.data.Code == 200) {
      Message.success("提交成功")
    } else {
      Message.error(res.data.Msg)
    }
  })
}
onMounted(() => {
  axios.get("/api/service/select").then((res) => {
    if (res.data.Data != null) {
      mqttUrl.value = res.data.Data.mqttserveraddress
      accessKey.value = res.data.Data.accesskey
    }
  })
})

</script>
<template>
  <div class="bg-[white] w-full h-full pt-[40px] px-[40px] text-base flex flex-col">
    <div class="flex justify-center items-center flex-col gap-[20px]">
      <InputText type="text" label="MQTT服务地址" placeholder="请输入服务地址" class="w-[500px] mr-[20px]" label-width="100px"
        align="right" v-model="mqttUrl" />
      <InputText type="text" label="AccessKey" placeholder="请输入AccessKey" class="w-[500px] mr-[20px]" align="right"
        label-width="100px" v-model="accessKey" />
      <div class="w-[500px] flex justify-end">
        <Button type="primary" content="提交" class="mr-[20px]" @click="infoCommit">
        </Button>
      </div>

    </div>
  </div>
</template>



<style scoped></style>
